<!doctype html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>${data.pagetitle}</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telphone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <jsp:include page="../comm/comm.jsp"/>

    <style type="text/css">
        body { min-width:320px;background:#fff; font:normal 18px/1.5 helvetica, 微软雅黑, verdana, san-serif;color:#333;overflow:hidden}
        *{margin: 0;padding: 0;}
        .header {
            height: 45px;
            width: 100%;
            background-color: #f1130e;
            position: relative;
            line-height: 45px;
            text-align: center;
            color: white;
            font-size: 18px;
            letter-spacing: 2px
        }
        .fanhui{
            width: 17%;
            height: 100%;
            background: url(/images/fanhui.png) no-repeat;
            background-size: 55% 76%;
            background-position-y: 5px;
            float: left;
        }
        .qiandao{
            width: 100%;
            height: 228px;
            background-color: white;
            opacity: 0.4;
            box-shadow: 2px 2px 5px #f1130e;
        }
        i{
            font-style: normal;
            color: #f1130e;
        }
        .tp_header{
            margin-top: 8px;
            padding-left: 20px;
            position: fixed;
        }
        .tp_header p{
            font-size: 15px;
            font-family: unset;
        }
        .tp_time span{
            color: #f1130e;
            font-size: 19px;
        }
        .tp_gz{
            width: 80px;
            height: 25px;
            background-color: #f1130e;
            border-radius: 5px;
            color: white;
            text-align: center;
            line-height: 25px;
        }
        .tp_content{
            width: 333px;
            height: 500px;
            margin: auto;
            margin-top: 153px;
            overflow: scroll;
        }
        .tp_content div{
            display: inline-block;
            width: 46%;
            height: 190px;
            background-color: #fefefe;
            border-radius: 5px;
            overflow: hidden;
        }
        .tp_content div .tp_tp{
            width: 100%;
            height: 137px;

            background-size: 100% 100%;
            border-radius: 0px;
        }
        .tp_bh{
            width: 90%;
            height: 22px;
            margin-top: -7px;
            padding: 0 8px;
        }
        .tp_number{
            width: 90%;
            height: 33px;
            padding: 0 8px;
        }
        .tp_bh span{
            font-size: 15px;
        }
        .tp_button{
            float: right;
            display: inline-block;
            width: 58px;
            height: 25px;
            background-color: #f1130e;
            border-radius: 15px;
            color: white;
            text-align: center;
            line-height: 25px;
            font-size: 15px;
        }
        .tp_content>div:nth-child(odd){
            margin-right: 18px;
        }
        .tp_content>div{
            box-shadow: 0px 2px 1px #666666;
        }
        .guize{
            background-color: white;
            display: none;
            overflow: hidden;
            padding: 21px 10px 10px 13px;
            margin-top: 3px;
        }
        .guize p{
            font-size: 13px;
            color: #666666;
        }
        .guize .shouqi{
            float: right;
            color: #f1130e;
            font-weight: bold;
        }
        .zhezhao{
            width: 100%;
            height: 100%;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0.3;
        }
        .ts_end{
            width: 80%;
            height: 180px;
            background-color: white;
            position: fixed;
            top: 37%;
            left: 39px;
            z-index: 8888;
            border-radius: 6px;
        }
        .button{
            width: 120px;
            height: 33px;
            border: none;
            background-color: #e40001;
            color: white;
            border-radius: 20px;
            margin: 21px 79px;
            font-size: 16px;
            line-height: 16px;
            outline:none;
        }
    </style>
</head>
<body>
<div class="zhuti"  style="background-image: url(/images/tp_bj.png);background-size: 100% 100%;">
    <div class="header">
        <div class="fanhui"></div>
        <div id="" style="width: 80%;">${data.title}</div>
    </div>

    <div class="tp_header">
        <p>2018 <span style="color: #f1130e;"> "${data.title}" </span> 活动正式启动!</p>
        <p style="color: #f1130e;font-size: 25px;font-weight: 600;">${data.title}</p>
        <p style="color: #666666;">转发朋友圈或微信好友发起投票,</p>
        <p class="tp_time" style="font-weight: 600;">活动时间: <span>${data.startDate}</span>到<span>${data.endDate}</span></p>
        <p class="tp_gz">活动规则?</p>
        <div class="guize">
            ${data.content}
            <p class="shouqi">收起</p>
        </div>
    </div>

    <div class="tp_content">
<c:forEach items="${list}" var="item">
    <div>
        <div class="tp_tp">
            <img src="/upload/${item.headimg}" width="100%" height="100%">
        </div>
        <p class="tp_bh">
            <span style="float: left;">${item.name}</span>
            <span style="float: right;color: #666666;">编号: <i>${item.code}</i></span>
        </p>
        <p class="tp_number">
            <span style="float: left;"><i>${item.num}</i>票</span>
            <c:if test="${item.openid==null}">
            <span class="tp_button" id="${item.id}">投票</span>
            </c:if>
            <c:if test="${item.openid!=null}">
                <span class="tp_button" id="${item.id}" style="background-color: #cccccc">已投票</span>
            </c:if>
        </p>
    </div>
</c:forEach>

        <%--<div>--%>
            <%--<div class="tp_tp">--%>
              <%--<img src="/images/touxiang.png" width="100%" height="100%">--%>
            <%--</div>--%>
            <%--<p class="tp_bh">--%>
                <%--<span style="float: left;">安井寻</span>--%>
                <%--<span style="float: right;color: #666666;">编号: <i>001</i></span>--%>
            <%--</p>--%>
            <%--<p class="tp_number">--%>
                <%--<span style="float: left;"><i>8888</i>票</span>--%>
                <%--<span class="tp_button">投票</span>--%>
            <%--</p>--%>
        <%--</div>--%>
        <%--<div>--%>
            <%--<div class="tp_tp"></div>--%>
            <%--<p class="tp_bh">--%>
                <%--<span style="float: left;">安井寻</span>--%>
                <%--<span style="float: right;color: #666666;">编号: <i>002</i></span>--%>
            <%--</p>--%>
            <%--<p class="tp_number">--%>
                <%--<span style="float: left;"><i>8888</i>票</span>--%>
                <%--<span class="tp_button">投票</span>--%>
            <%--</p>--%>
        <%--</div>--%>
        <%--<div>--%>
            <%--<div class="tp_tp"></div>--%>
            <%--<p class="tp_bh">--%>
                <%--<span style="float: left;">安井寻</span>--%>
                <%--<span style="float: right;color: #666666;">编号: <i>003</i></span>--%>
            <%--</p>--%>
            <%--<p class="tp_number">--%>
                <%--<span style="float: left;"><i>8888</i>票</span>--%>
                <%--<span class="tp_button">投票</span>--%>
            <%--</p>--%>
        <%--</div>--%>
        <%--<div>--%>
            <%--<div class="tp_tp"></div>--%>
            <%--<p class="tp_bh">--%>
                <%--<span style="float: left;">安井寻</span>--%>
                <%--<span style="float: right;color: #666666;">编号: <i>004</i></span>--%>
            <%--</p>--%>
            <%--<p class="tp_number">--%>
                <%--<span style="float: left;"><i>8888</i>票</span>--%>
                <%--<span class="tp_button">投票</span>--%>
            <%--</p>--%>
        <%--</div>--%>
        <%--<div>--%>
            <%--<div class="tp_tp"></div>--%>
            <%--<p class="tp_bh">--%>
                <%--<span style="float: left;">安井寻</span>--%>
                <%--<span style="float: right;color: #666666;">编号: <i>004</i></span>--%>
            <%--</p>--%>
            <%--<p class="tp_number">--%>
                <%--<span style="float: left;"><i>8888</i>票</span>--%>
                <%--<span class="tp_button">投票</span>--%>
            <%--</p>--%>
        <%--</div>--%>
        <%--<div>--%>
            <%--<div class="tp_tp"></div>--%>
            <%--<p class="tp_bh">--%>
                <%--<span style="float: left;">安井寻</span>--%>
                <%--<span style="float: right;color: #666666;">编号: <i>004</i></span>--%>
            <%--</p>--%>
            <%--<p class="tp_number">--%>
                <%--<span style="float: left;"><i>8888</i>票</span>--%>
                <%--<span class="tp_button">投票</span>--%>
            <%--</p>--%>
        <%--</div>--%>

    </div>
</div>
<div class="zhezhao" style="display: none"></div>
<div class="ts_end" style="display: none">
    <p style="margin: 26px;" id="dateString">截止${data.endDate}  <span style="color: #e40001;">活动已结束 !</span></p>
    <p style="color: #888888;margin-left: 77px;margin-top: -8px;font-size: 16px;" id="jqqd">敬请期待</p>
    <button class="button" onclick="closePage()">点击关闭</button>
</div>


</body>
</html>
<script type="text/javascript">
    isOver('${data.status}','${data.startDate}','${data.endDate}')
    var  activityId=config.getQueryString("activityId");
    $(".tp_gz").click(function(){
        $('.guize').slideToggle(200);
    })
    $(".shouqi").click(function(){
        $('.guize').slideUp(200);
    })
    $(".tp_button").one('click',function(){
        if(($(this).html()+"")=="已投票"){
            alert("请勿重复投票");
            return;
        }
        var  views=$(this);
        config.commPost("/tasks/dianzan.json",{taskId:$(this).attr("id"),type:"1",activityId:activityId},function (data) {
            var num =views.siblings('span').children('i').html()*1+1;
            views.siblings('span').children('i').html(num);
            views.css('background','#cccccc');
            views.html('已投票');
        });

    })
    var height = $(window).height();
    $(".zhuti").height(height);

    var count = $(".tp_header").height();
    var c_header = $(".tp_header").height();
    var content = height - count - c_header;
    var h_yb = count/2;
    var c_h = content + h_yb;
    $(".tp_content").height(c_h);

    $(".button").click(function(){
        $('.zhuti').css('display','none');
    })
</script>